

start();
function start(){
  showData();
  btnPrimary();
  add();
  addBtnAddEvent();
  addEnter();
  btnCancel();
  btnEsc2();
  pagaination();
  
}

//为每个删除按钮，添加删除事件
$("#tbCard").on("click", ".delete", function () {
  //获取数据
  let data = getData();
  for (let i = 0; i < data.length; i++) {
    let id = $(this).attr("data-index");
    console.log(id);
    //判断
    if (data[i].id == id) {
      data.splice(i, 1);
    }
    saveData(data);//数据
    showData();//渲染
    pagaination(); //分页
  }
});
//判断是否加载
function add() {
  if (getData().length == 0) {
    saveData(ServiceArr);
  }
}
//存储为本地数据
function saveData(data) {
  sessionStorage.setItem("ServiceArr", JSON.stringify(data));
}
//获取本地数据
function getData() {
  let data = sessionStorage.getItem("ServiceArr");
  if (data !== null) {
    return JSON.parse(data);
  } else {
    return [];
  }
}
//渲染数据
function showData() {
  let data1 = getData();
  $("#tbCard").empty();
  let fragment1 = document.createDocumentFragment();
  $.each(data1, function (i, item) {
    $("#tbCard").html = "";
    let tr = document.createElement("tr");//创建tr
    tr.innerHTML =`
       
         <td>${item.id}</td>
         <td>${item.type}</td>
         <td>${item.icn}</td>
         <td>${item.state}</td>
         <td>
           <button id="xiugai" class="edit" data-index='${item.id}'>编辑</button>
           <button class="delete" data-index='${item.id}'>删除</button>
         </td>
       
       `;
    fragment1.appendChild(tr);
  })
  $("#tbCard").append(fragment1); 
}
//查询，搜索
function search() {
  let typeInput = $('#type').val();//输入框
  let selects = document.getElementById('state').value;
  let tbody = $('tbody')[0];
  if(typeInput == ""){
    return;
  }
  document.querySelector('tbody').innerHTML = '';
  let data1 = getData();
  if(selects =='全部'){
    console.log(selects);
    for (let i = 0; i < data1.length; i++) {
      if (data1[i].type == typeInput) {
      let data1 = getData();
      let tr = '<tr><td>'+ (data1[i].id)+'</td><td>'+(data1[i].type)+'</td><td>'+(data1[i].icn)+'</td><td>'+ (data1[i].state) +'</td><td><button id="xiugai" class="edit" data-index='+data1[i].id+'>编辑</button><button class="delete" data-index='+(data1[i].id)+'>删除</button></td>' +'</tr>';
      $('#tbCard').append(tr);
      }
    }
  }else{
    for (let i = 0; i < data1.length; i++) {
      if(data1[i].type == typeInput && data1[i].state == selects){
        let data1 = getData();
        let tr = '<tr><td>'+ (data1[i].id)+'</td><td>'+(data1[i].type)+'</td><td>'+(data1[i].icn)+'</td><td>'+ (data1[i].state) +'</td><td><button id="xiugai" class="edit" data-index='+data1[i].id+'>编辑</button><button class="delete" data-index='+(data1[i].id)+'>删除</button></td>' +'</tr>';
        $('#tbCard').append(tr);
      }
    }
  }
}
//重置
function clearInput() {
  document.getElementById("type").value = '';
  document.getElementById('state').selectedIndex = 0;
  getData();
  showData();
  start();
}

//新增
function btnPrimary(){
  //新增序号+1
  // let id = ServiceArr[ServiceArr.length - 1].id + 1;
  let serviceType  = $('#serviceType');
  let icnSelect = $('#icnSelect');
  let statSelect =$('#statSelect');
  let idMessage = $("#idMessage");
  $('#enter').click(function(){
    let data = getData();
    data.unshift({
      id: idMessage.val(),
      type:serviceType.val(),
      icn:icnSelect.val(),
      state:statSelect.val(),
    })
    saveData(data);
    showData();
    pagaination();
  })
}
//点击显示新增模态框
function addBtnAddEvent() {
  $("#butNew").click(function () {
    addModelShow();
  })
}
function addModelShow() {
  $("#idNewWeb").removeClass("hide");
  $("#idNewWeb").addClass("show");
}
//点击隐藏新增模态框
function btnCancel() {
  $("#esc").click(function () {
    $("#idNewWeb").removeClass("show");
    $("#idNewWeb").addClass("hide");
  })
}
//添加框确认按钮消失事件委托
function addEnter(){
  $("#enter").click(function(){
    addEnterCloss();
  })
}
function addEnterCloss(){
  $("#idNewWeb").removeClass("show");
  $("#idNewWeb").addClass("hide");
}

//修改
$("#tbCard").on("click","#xiugai",function(){
  let id = $(this).attr('data-index');
  $("#idNewWeb2").removeClass("hide");
  $("#idNewWeb2").addClass("show");
  $("#enter2").click(function (){
    $("#idNewWeb2").removeClass("show");
    $("#idNewWeb2").addClass("hide");
    let data = getData();
    let idMessage2 = $("#idMessage2").val();
    let serviceType2 =  $("#serviceType2").val();
    let icnSelect2 =  $("#icnSelect2").val();
    let statSelect2 =  $("#statSelect2").val();

    for(let i = 0; i < data.length; i++){
      if (data[i].id == id){
        data[i].id = idMessage2;
        data[i].type = serviceType2;
        data[i].icn = icnSelect2;
        data[i].state = statSelect2;
      }
      saveData(data);
      showData();
      pagaination();
    }
  });
});
//数据修改的模态框隐藏
function btnEsc2() {
  $("#esc2").click(function () {
    $("#idNewWeb2").removeClass("show");
    $("#idNewWeb2").addClass("hide");
  })
}

//分页
function pagaination() {
  let page = 1;   //第几页
  let no = 0;
  let data1 = getData();
  let serialNumber = data1.length;  //序号
  console.log(serialNumber);
  onloude(0, 5);  //初始页面信息，第一页
  $("#pno").text(page);  //页码
  $("#nextPage").click(function () {
    if (no + 5 < serialNumber) {
      no += 5;
      page++;
      $("#pno").text(page);
      if (serialNumber >= (no + 5)) {
        onloude(no, no + 5);
      } else {
        onloude(no, serialNumber);
      }
    }
  });
  $("#lastPage").click(function () {
    if (no - 5 >= 0) {
      no -= 5;
      page--;
      $("#pno").text(page);
      onloude(no, no + 5);
      
    }
  })
}
function onloude(n, a) {
  document.querySelector('tbody').innerHTML = '';
  for (let i = n; i < a; i++) {
    let data1 = getData();
    let tr = '<tr><td>'+ (data1[i].id)+'</td><td>'+(data1[i].type)+'</td><td>'+(data1[i].icn)+'</td><td>'+ (data1[i].state) +'</td><td><button id="xiugai" class="edit" data-index='+data1[i].id+'>编辑</button><button class="delete" data-index='+(data1[i].id)+'>删除</button></td>' +'</tr>';    // console.log(place[i].id);
    $('#tbCard').append(tr);
    // saveData(data);
  }
}


// function pagColor(){
//   let lastPage = document.getElementById('lastPage');
//   lastPage.onclick=function(){
//     style.background.color='#009688';
//   }
// }

// $("#green button").click.css("backgroundColor","#009688");
// $(function () {
//   $("#green button").click(function () {
//       $(this).css("backgroundColor","#009688");
//   })
 
// })

// $(function () {
//   $("#green button").mouseover(function () {
//       $(this).css("opacity", "calc(0.5)");
//   })
//   $("#green button").mouseout(function () {
//       $(this).css("opacity", "calc(1)");
//   })
// })